<script setup>
  import { onMounted, ref } from 'vue'
  import { getContainerApi } from '/@/api/topo/topo'
  //展示数据
  const serverData = ref({})
  const option = ref({
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
    },
    series: [
      {
        type: 'tree',
        left: '0.5%',
        right: '0.5%',
        top: '8%',
        bottom: '20%',
        //symbol: 'circle',
        orient: 'vertical',
        symbolSize: 35,
        expandAndCollapse: true,
        label: {
          position: 'top',
          rotate: 0,
          verticalAlign: 'middle',
          align: 'inside',
          fontSize: 15,
        },
        leaves: {
          label: {
            position: 'bottom',
            rotate: 0,
            verticalAlign: 'middle',
            align: 'center',
            formatter: function (params) {
              // 缩短文本
              const maxTextLength = 35 // 设置最大文本长度
              const text = params.name
              if (text.length > maxTextLength) {
                return text.slice(0, maxTextLength) + '...' // 使用省略号表示被截断的部分
              }
              return text
            },
          },
        },
        animationDurationUpdate: 750,
      },
    ],
  })

  const showServer1 = ref(false)
  const showServer2 = ref(false)
  const showServer3 = ref(false)
  const getOption = (data) => {
    return {
      ...option.value,
      series: [
        {
          ...option.value.series[0],
          data: [data],
        },
      ],
    }
  }
  const showServer = (number) => {
    if (number == 1) {
      ;(showServer1.value = true), (showServer2.value = false), (showServer3.value = false)
    } else if (number == 2) {
      ;(showServer1.value = false), (showServer2.value = true), (showServer3.value = false)
    } else {
      ;(showServer1.value = false), (showServer2.value = false), (showServer3.value = true)
    }
  }
  const server2 = ref('server2')
  const focus = () => {
    console.log('focus')
  }
  const handleChange = (value) => {
    if (value == 'server1') {
      getContainer(1)
    } else if (value == 'server2') {
      getContainer(2)
    } else {
      getContainer(3)
    }
  }
  async function getContainer(id) {
    const result = await getContainerApi({ number: id })
    //console.log(res)
    /*     if (res.success != true) {
      console.log('error')
      return
    } */
    serverData.value = result
    showServer(id)
  }
  onMounted(() => {
    getContainer(1)
  })
</script>
<template>
  <div>
    <a-space>
      <a-select
        ref="select"
        v-model:value="server2"
        style="width: 200px"
        @focus="focus"
        @change="handleChange"
      >
        <a-select-option value="server2">中心节点 172.28.158.99</a-select-option>
        <a-select-option value="server3">分布式节点A 172.28.158.130</a-select-option>
        <a-select-option value="server1">分布式节点B 172.28.158.98 </a-select-option>
      </a-select>
    </a-space>

    <v-chart v-if="showServer1" :option="getOption(serverData)" style="height: 800px" />
    <v-chart v-if="showServer2" :option="getOption(serverData)" style="height: 800px" />
    <v-chart v-if="showServer3" :option="getOption(serverData)" style="height: 800px" />
  </div>
</template>
<style></style>
